<template>
    
    <div class="home">
        <el-carousel height="300px" class="myswiper">
      <el-carousel-item v-for="(l,i) in imgs" :key="i">
         <el-image class="himg" :src="l.url"></el-image>
      </el-carousel-item>
    </el-carousel>
    </div>
</template>

<script>
import { reactive,toRefs } from 'vue'
export default {
    name:'home',
    setup(){
        const state = reactive({
            imgs:[
                {
                    url:require('@/assets/images/img1.jpg')
                },
                {
                    url:require('@/assets/images/img2.jpg')
                },
                {
                    url:require('@/assets/images/img3.jpg')
                },
                {
                    url:require('@/assets/images/img4.jpg')
                },
            ]
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
.home{
    .myswiper{
         width:100%;
        margin-top:20px;
    }
    .himg{
        width:100%;
    }
}
</style>